<template>
  <div class="asideBox">
    <div class="aside-message">
      <!-- 后台管理系统 -->
      <el-avatar class="userName">{{ userName ? userName : '未登录' }}</el-avatar>
    </div>
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :style="{ width: '200px' }" :default-openeds="[]">
          <template v-for="item in newNavs" :key="item.name">
            <el-menu-item v-if="!item.kids" :index="item.name" @click="routeSkip(item.name)" class="borderChange">
              <template #title>{{ item.title }}</template>
            </el-menu-item>
            <el-sub-menu v-else :index="item.name" class="borderChange">
              <template #title>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item v-for="sec in item.kids" :index="sec.name" @click="routeSkip(sec.name)" class="borderChange">
                <template #title>{{ sec.title }}</template>
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-menu>
      </el-scrollbar>
    </el-aside>
  </div>
</template>
<script setup>
  import { newNavs } from '@/router/routes.js';
  import { onMounted, ref } from 'vue';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const userName = ref()

  const routeSkip = info => {
    // console.log(info);
    router.push({ name: info });
  };

  onMounted(() => {
    userName.value = localStorage.getItem('adminName')
  })
</script>
<style lang="scss" scoped>
  // #myAside {
  //     .aside-message {
  //         width: 100%;
  //         font-size: 20px;
  //         text-align: center;
  //         line-height: 200px;
  //         background-color: aquamarine;
  //     }
  //     // .borderChange {
  //     //   border-radius: 10px;
  //     //   background-color: rgb(43, 215, 237);
  //     // }
  // }

  // 侧边栏弹性盒
  .asideBox {
    display: flex;
    flex-direction: column;
    width: 200px;
    // 头标
    div.aside-message {
      .userName {
        width: 70%;
        height: 70%;
        font-size: 30px;
        background-color: rgb(44, 85, 71);
      }
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 20px;
      text-align: center;
      line-height: 200px;
      border-bottom: 1px solid #dcdfe6;
      border-right: 1px solid #dcdfe6;
    }
  }
</style>
